<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>我的预约</title>
  <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'></c:url>">
  <link rel="stylesheet" href="<c:url value='/resource/wechat/css/main.css'></c:url>">
  <style>
    .ui-list-pure a{color: #000;}
    .sslk_more {
      width: 98%;
      float: left;
      margin-left: 1%;
      height: 35px;
      line-height: 35px;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
      clear: both;
      margin-top: 15px;
      margin-bottom: 15px;
      font-family: "微软雅黑", "黑体", "宋体";
      font-size: 1.0rem;
    }
    .sslk_more a {
      color: #fff;
      text-decoration: none;
    }
    #pr_list_foot {
      margin: 0;
      padding: 0;
      height: 3rem;
      line-height: 3rem;
      width: 100%;
      border: none;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 0.95rem;
      color: #aba0a0;
    }
    #pr_list_foot a {
      display: block;
      height: 3rem;
      width: 7.5rem;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      font-weight: normal;
      text-decoration: none;
      color: #aba0a0;
    }
  </style>
</head>
<body class="body_bg" ontouchstart>
<%--<header class="ui-header ui-header-positive ui-border-b">
  <i class="ui-icon-return" onclick="history.back()"></i>
  <h1>我的预约</h1>
  <div class="admin_ico"></div>
</header>--%>
<section class="ui-container">
  <section id="tab">
    <div class="demo-item">
      <div class="demo-block">
        <div class="ui-tab">
          <ul class="ui-tab-nav ui-border-b">
            <li class="current">未受理</li>
            <li>已受理</li>
            <li>已撤销</li>
          </ul>
          <ul class="ui-tab-content" style="width:200%">
            <li>
              <ul class="ui-list ui-list-pure ui-border-tb" id="ul0">
              </ul>
            </li>
            <li>
              <ul class="ui-list ui-list-pure ui-border-tb" id="ul1">
              </ul>
            </li>
            <li>
              <ul class="ui-list ui-list-pure ui-border-tb" id="ul2">
              </ul>
            </li>
          </ul>
          <input type="hidden" value="${member.guid}" id="loginId">
        </div>
      </div>
      <script class="demo-script">
      </script>
    </div>
    <div id="pr_list_foot"><a class="foot_icon" onclick="more(this);" href="javascript:void(0)" id="moreButton">加载更多</a></div>
  </section>
</section>
</body>
<script src="<c:url value="/resource/wechat/lib/zepto.min.js"></c:url>"></script>
<script src="<c:url value="/resource/wechat/js/frozen.js"></c:url>"></script>
<script>
  // 已受理 1 未受理 0 已撤销 9 全部    all
  var currentPage = 0;
  var url = "<c:url value='/api/project/myOrder'/>";
  var gotoIndex = 0;
  var projectstatus = "0";

  (function() {
    var tab = new fz.Scroll('.ui-tab', {
      role: 'tab',
      autoplay: false,
      interval: 3000
    });
    /* 滑动开始前 */
    tab.on('beforeScrollStart', function(fromIndex, toIndex) {
      console.log(fromIndex, toIndex); // from 为当前页，to 为下一页
      currentPage = 1;
      gotoIndex = toIndex;
      if(toIndex == 0){
        projectstatus = "0";
      }else if(toIndex == 1){
        projectstatus = "1";
      }else {
        projectstatus = "9";
      }
      loadMore(currentPage,0);
    })
  })();

  $(function(){
    currentPage = 1;
    loadMore(currentPage,0);
  })

  function more(obj){
    $(obj).html("加载中");
    currentPage++;
    loadMore(currentPage,1);
  }

  function loadMore(page,isMore){
    if(!page){
      page =1;
    }
    $.ajax({
      url : url ,
      data : '{"loginId":"'+ $("#loginId").val() + '","projectstatus":"' + projectstatus +'",' + '"pageNum":' + currentPage +'}',
      dataType : "json",
      type : "post",
      contentType : "application/json;charser=utf-8",
      success : function(resp){
        if(resp&&resp.succ){
          var _data = resp.data.list, _length = _data.length;
          var _html = "";
          for(var i= 0;i<_length;i++){
            var _item = _data[i];
            var _url = "<c:url value='/api/police/orderDetail/'/>" + _item.guid;
            _html += "<li class='ui-border-t' onclick=gotoOrderDetail('"+ _url +"')><h4><a href='javascript:void(0)'>"+ _item.orderMatName +"</a></h4>"+
                    "<p><span>预约时间 </span><span class='date'>"+_item.orderDay+"</span></p></li>";
          }
          if(isMore == 0){
            $("#ul"+gotoIndex).html(_html);
          }else{
            $("#ul"+gotoIndex).append(_html);
          }
          if(_length > 4){
            $("#pr_list_foot").css("display", "block");
            $("#moreButton").html("加载更多");
          }else {
            $("#pr_list_foot").css("display", "none");
          }
        }else {
          if(isMore == 0){
            $("#ul"+gotoIndex).html("<div style='text-align: center;height: 50px; line-height: 50px;'>未查询到结果</div>");
          }else {
            $("#pr_list_foot").css("display", "block");
            $("#moreButton").html("无更多数据");
          }
        }
      }
    });
  }

  function gotoOrderDetail(url){
    window.location.href = url;
  }

</script>

</html>